<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("../img/bg.png");
        }
        .login{
            background: white;
            width: 400px;
            margin: auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="../img/logo.png">
</div>
<div class="login">
    <div>
        注册详情
        <hr/>
    </div>
    <form action="#" method="get" autocomplete="off">
    <div>
        <label for="username">姓名:</label>
        <input type="text" id="username" name="username" value="" placeholder="请输入姓名" required/>
    </div>
    <div>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" value="" placeholder="请输入密码" required/>
    </div>

    <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" value="" placeholder="请输入邮箱" required/>
    </div>

    <div>
        <label for="tel">手机:</label>
        <input type="tel" id="tel" name="tel" value="" placeholder="请输入手机" required/>
    </div>
    <hr/>
    <div>
        性别:
        <label>&nbsp;&nbsp;<input type="radio" id="gender" name="gender" value="male" checked/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <label><input type="radio" name="gender" value="female" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    </div>
    <div>
        爱好:
        <label><input type="checkbox" id="hobby" name="hobby" value="music" />音乐</label>
        <label><input type="checkbox" name="hobby" value="movie" />电影</label>
        <label><input type="checkbox" name="hobby" value="games" />游戏</label>
    </div>
    <div>
        <label for="birthday">出生日期:</label>
        <input type="date" id="birthday" name="birthday" value="" />
    </div>
    <div>
        <label for="city">城市:</label>
        <select id="city" name="city">
        <option>------请选择一个城市------</option>
            <optgroup label="直辖市"></optgroup>
            <option>北京</option>
            <optgroup label="省会城市"></optgroup>
            <option>合肥</option>
        </select>
    </div>
    <div>
        <label for="signature">个性签名:</label>
        <textarea id="signature" name="signature" rows="5" cols="40" placeholder="请写下您的与众不同...最长不超过50字" maxlength="50"></textarea>
    </div>
    <button type="submit">注册</button>
    <button type="reset">重置</button>
    </form>
</div>
</body>
</html>
